<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            
            <el-form-item label="学期" prop="className">
                <el-select
                v-model="queryParams.status"
                placeholder="班级状态"
                clearable
                filterable
                size="small"
                style="width: 180px">
                <el-option
                    v-for="dict in termTimeList"
                    :key="dict.id"
                    :label="dict.tetiBeginYear+'~'+dict.tetiEndYear"
                    :value="dict.id"
                >
                <span style="float: left">{{ dict.tetiBeginYear+'~'+dict.tetiEndYear }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.tetiTerm==1?'一学期':'二学期' }}</span>
                </el-option>
                </el-select>
                
            </el-form-item>
            <el-form-item label="科目" prop="status">
                <el-select
                v-model="queryParams.status"
                placeholder="科目"
                clearable
                filterable
                size="small"
                style="width: 180px">
                <el-option
                    v-for="dict in subjectList"
                    :key="dict.id"
                    :label="dict.subjectName"
                    :value="dict.id"
                />
                </el-select>
            </el-form-item>

            <el-form-item label="老师" prop="classDept">
                <el-select
                v-model="queryParams.classDept"
                placeholder="班级所属部门"
                clearable
                filterable
                size="small"
                style="width: 180px">
                <el-option
                    v-for="dict in userOptions"
                    :key="dict.id"
                    :label="dict.username"
                    :value="dict.id"
                />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            </el-form>
            <cla-time-calendar ref="claTimeCalendar" :readonly="true" can-cla-time-attend class="calendar" />
        <!-- <div>
            <el-row>
                <el-col  :span="24">
                    <div style="height: 40px;align-items: center;display: flex;justify-content: center;">
                    <div style="padding: 0 15px;cursor: pointer;" @click="calendarBeginDateClick(-7)">
                        <el-icon class="el-icon-arrow-left" style="font-size: 30px;" />
                    </div>
                    <div>
                        <el-date-picker
                        v-model="calendarBeginDate"
                        size="small"
                        type="date"
                        style="width: 150px;"
                        value-format="yyyy-MM-dd"
                        :picker-options="weekBeginDatePickerOptions"
                        placeholder="开始日期"
                        @change="handlerCalendarBeginDateChange"
                        />
                        -
                        <el-date-picker
                        v-model="calendarEndDate"
                        clearable
                        size="small"
                        type="date"
                        style="width: 150px;"
                        value-format="yyyy-MM-dd"
                        placeholder="结束日期"
                        disabled
                        />
                    </div>
                    <div style="padding: 0 15px;cursor: pointer;" @click="calendarBeginDateClick(7)">
                        <el-icon class="el-icon-arrow-right" style="font-size: 30px" />
                    </div>
                    </div>
                </el-col>
            </el-row>
            
            <el-row>
                <div class="timetableDiv">
                    <div class="group">
                    <div class="titlediv1">时间</div>
                    <div class="titlediv1"  v-for="item in columnTitles" :key="item.weekName">
                        <span>{{ item.weekName }}</span>
                    </div>
                    </div>
                    <div class="group1" v-for="item in times" :key="item.id">
                        <div id="timediv" style="font-size:12px">{{item.cosebeginTime}}~{{item.coseEndTime}}</div>
                        
                        <draggable group="people" animation="500" v-model="item.coucseList"  @end="draggableEnd"   dragClass="drag" style="display: flex;" >
                            <transition-group style="display: inline-flex;" class="manyBackground" v-if="item.coucseList.length>7">
                                <div class="titlediv"  v-for="coucse in item.coucseList" :key="coucse.id" style="border-bottom: 1px solid #ebeef5;">
                                    <div  v-for="classT in coucse.courseClassList" :key="classT.name">
                                        {{ classT.name }}
                                    </div>
                                </div>
                            </transition-group>
                            <transition-group style="display: inline-flex;"  class="lessBackground" v-else-if="item.coucseList.length<7">
                                <div class="titlediv"  v-for="coucse in item.coucseList" :key="coucse.id" style="border-bottom: 1px solid #ebeef5;">
                                    <div  v-for="classT in coucse.courseClassList" :key="classT.name">
                                        {{ classT.name }}
                                    </div>
                                </div>
                            </transition-group>
                            <transition-group style="display: inline-flex;"  v-else>
                                <div class="titlediv normalBackground"  v-for="coucse in item.coucseList"  :key="coucse.id" style="border-bottom: 1px solid #ebeef5;">
                                    <div  v-for="classT in coucse.courseClassList" :key="classT.name">
                                        {{ classT.name }}
                                    </div>
                                </div>
                            </transition-group>
                        </draggable>
                    </div>
                </div>
            </el-row>
            
        </div> -->
        
        
    </div>
  </template>
  
  <script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  // 例如：import 《组件名称》 from '《组件路径》';
  import draggable from 'vuedraggable'
  import moment from 'moment'
  import claTimeCalendar from '@/views/course/timetable/claTimeCalendar'

  export default {
    // import引入的组件需要注入到对象中才能使用
    
    components: {
        draggable,
        claTimeCalendar
    },
    data() {
      // 这里存放数据
      return {
        weekBeginDatePickerOptions: {
            disabledDate(time) {
            return moment(time).weekday() !== 1
            }
        },
        calendarBeginDate: '',
        calendarEndDate: '',
        queryParams:{},
        termTimeList:[],
        handleQuery:{},
        resetQuery:{},
        subjectList:[],
        userOptions:[],
        myArray: [{ people: 'cn', id: 1, name: 'www.itxst.com' },
          { people: 'cn', id: 2, name: 'www.baidu.com' },
          { people: 'cn', id: 3, name: 'www.taobao.com' },
          { people: 'us', id: 4, name: 'www.google.com' }],
        columnTitles: [
            {weekName:"星期一",id:1},
            {weekName:"星期二",id:2},
            {weekName:"星期三",id:3},
            {weekName:"星期四",id:4},
            {weekName:"星期五",id:5},
            {weekName:"星期六",id:6},
            {weekName:"星期日",id:7},
        ],
        course:[
            {weekName:"星期一",id:1},
            {weekName:"星期二",id:2},
            {weekName:"星期三",id:3},
            {weekName:"星期四",id:4},
            {weekName:"星期五",id:5},
            {weekName:"星期六",id:6},
            {weekName:"星期日",id:7},
        ],
        times:[
            {id:1, cosebeginTime:'08:00:00',coseEndTime:'08:45:00',
                coucseList:[
                    {courseClassList:[
                        {name:"张三1",subject:"语文",isConflict:'0'}
                    ], id:1
                    },
                    {courseClassList:[
                        {name:"里斯",subject:"语文",isConflict:'0'}
                    ],id:2},
                    {courseClassList:[
                        {name:"往往",subject:"语文",isConflict:'0'}
                    ],id:3},
                    {courseClassList:[
                        {name:"赵六",subject:"语文",isConflict:'0'}
                    ],id:4},
                    {courseClassList:[
                        {name:"马奇",subject:"语文",isConflict:'0'}
                    ],id:5},
                    {courseClassList:[
                        
                    ],id:6},
                    {courseClassList:[
                        
                        ],id:7},
                       
                ]},
            {id:2, cosebeginTime:'08:55:00',coseEndTime:'09:40:00',
                coucseList:[
                        {courseClassList:[
                            {name:"张三1",subject:"语文",isConflict:'0'}
                        ], id:11
                        },
                        {courseClassList:[
                            {name:"里斯",subject:"语文",isConflict:'0'}
                        ],id:12},
                        {courseClassList:[
                            {name:"往往",subject:"语文",isConflict:'0'}
                        ],id:13},
                        {courseClassList:[
                            {name:"赵六",subject:"语文",isConflict:'0'}
                        ],id:14},
                        {courseClassList:[
                            {name:"马奇",subject:"语文",isConflict:'0'}
                        ],id:15},
                        {courseClassList:[
                            
                        ],id:16},
                        {courseClassList:[
                            
                            ],id:17},
                        
                    ]
            },
            {id:3, cosebeginTime:'10:00:00',coseEndTime:'10:45:00',coucseList:[
            {courseClassList:[
                            {name:"张三1",subject:"语文",isConflict:'0'}
                        ], id:11
                        },
                        {courseClassList:[
                            {name:"里斯",subject:"语文",isConflict:'0'}
                        ],id:12},
                        {courseClassList:[
                            {name:"往往",subject:"语文",isConflict:'0'}
                        ],id:13},
                        {courseClassList:[
                            {name:"赵六",subject:"语文",isConflict:'0'}
                        ],id:14},
                        {courseClassList:[
                            {name:"马奇",subject:"语文",isConflict:'0'}
                        ],id:15},
                        {courseClassList:[
                            
                        ],id:16},
                        {courseClassList:[
                            
                            ],id:17},
                        
            ]},
            {id:4, cosebeginTime:'10:55:00',coseEndTime:'11:40:00',coucseList:[
            {courseClassList:[
                            {name:"张三1",subject:"语文",isConflict:'0'}
                        ], id:11
                        },
                        {courseClassList:[
                            {name:"里斯",subject:"语文",isConflict:'0'}
                        ],id:12},
                        {courseClassList:[
                            {name:"往往",subject:"语文",isConflict:'0'}
                        ],id:13},
                        {courseClassList:[
                            {name:"赵六",subject:"语文",isConflict:'0'}
                        ],id:14},
                        {courseClassList:[
                            {name:"马奇",subject:"语文",isConflict:'0'}
                        ],id:15},
                        {courseClassList:[
                            
                        ],id:16},
                        {courseClassList:[
                            
                            ],id:17},
                        
            ]},
            {id:5, cosebeginTime:'14:00:00',coseEndTime:'14:45:00',coucseList:[]},
            {id:6, cosebeginTime:'14:55:00',coseEndTime:'15:40:00',coucseList:[]},
            {id:7, cosebeginTime:'16:00:00',coseEndTime:'16:45:00',coucseList:[]},
            {id:8, cosebeginTime:'16:55:00',coseEndTime:'17:40:00',coucseList:[]}
        ],
        courseList:[
            {   id:1,
                coucseWeekList:[
                        {courseClassList:[
                            {name:"张三1",subject:"语文",isConflict:'0'}
                        ], id:1
                        },
                        {courseClassList:[
                            {name:"里斯",subject:"语文",isConflict:'0'}
                        ],id:2},
                        {courseClassList:[
                            {name:"往往",subject:"语文",isConflict:'0'}
                        ],id:3},
                        {courseClassList:[
                            {name:"赵六",subject:"语文",isConflict:'0'}
                        ],id:4},
                        {courseClassList:[
                            {name:"马奇",subject:"语文",isConflict:'0'}
                        ],id:5},
                        {courseClassList:[
                            
                        ],id:6},
                        {courseClassList:[
                            
                            ],id:7},
                        
                    ]
            },
            {   id:2,
                coucseWeekList:[
                        {courseClassList:[
                            {name:"张三1",subject:"语文",isConflict:'0'}
                        ], id:1
                        },
                        {courseClassList:[
                            {name:"里斯",subject:"语文",isConflict:'0'}
                        ],id:2},
                        {courseClassList:[
                            {name:"往往",subject:"语文",isConflict:'0'}
                        ],id:3},
                        {courseClassList:[
                            {name:"赵六",subject:"语文",isConflict:'0'}
                        ],id:4},
                        {courseClassList:[
                            {name:"马奇",subject:"语文",isConflict:'0'}
                        ],id:5},
                        {courseClassList:[
                            
                        ],id:6},
                        {courseClassList:[
                            
                            ],id:7},
                        
                    ]
            }
        ]
     
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        loadData(){

        },
        // 开始时间变更 计算结束时间
        changeCalendarBeginDate(calendarBeginDate) {
            if (calendarBeginDate) {
                this.calendarEndDate = moment(calendarBeginDate).add(6, 'days').format('YYYY-MM-DD')
            } else {
                this.calendarEndDate = undefined
            }
        },
        // 开始时间变更 计算结束时间
        handlerCalendarBeginDateChange(calendarBeginDate) {
            this.changeCalendarBeginDate(calendarBeginDate)
            this.loadData()
        },
        // 开始时间变更
        calendarBeginDateClick(days) {
            this.calendarBeginDate = moment(this.calendarBeginDate).add(days, 'days').format('YYYY-MM-DD')
            this.calendarEndDate = moment(this.calendarBeginDate).add(6, 'days').format('YYYY-MM-DD')
            this.loadData()
        },
        draggableEnd(item){
            // console.log(item)
            // console.log(this.times)
            // return false
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  };
  </script>
<style lang='scss' scoped>
.group{
    display: flex;
    border: 1px solid #ebeef5;
    border-right: none;
    border-bottom: none;
    width: 960px;
    #timediv{
        width:160px;
        height: 60px;
        border-right: 1px solid #ebeef5;
        // border-bottom: 1px solid #ebeef5;
        text-align: center;
        padding-top: 20px;
    }
    
}

.sljfGroup{
    display: flex;
    border: 1px solid #ebeef5;
    border-right: none;
    border-bottom: none;

}
.titlediv {
        width:120px;
        height: 60px;
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
        border: 1px solid #ebeef5;
        text-align: center;
        padding-top:20px
    }
.titlediv1 {
    width:120px;
    height: 60px;
    border: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    
    text-align: center;
    padding-top:20px
}
.drag{
    background: #000;
    background-image: linear-gradient(#02a7f0,#02a7f0) !important;
    color:#FFF;
}    
.timetableDiv{

    width: 100%;
}
.group1{
    display: flex;
    margin-top: 3px;
    // border: 1px solid #ebeef5;
    // min-width: 960px;
    #timediv{
        width:120px;
        height: 60px;
        border: 1px solid #ebeef5;

        text-align: center;
        padding-top: 20px;
    }
    
}
.manyBackground{
    border:1px solid #f5e483;
}
.lessBackground{
    border:1px solid #83cbf5;
}
.normalBackground{
    border:1px solid #ebeef5;
}
</style>
  